<template>
	<div class="clienthome infinite-list-wrapper" :class="bgImg[titleclass-1]">
		<div :style="{height:clientHeight > -40 ? '0px':'45px'}" class="otherhead">
			<div class="typetab" v-show="clientHeight <= -40">
				<div :class="titleclass == 1 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(1,'主页')">主页</div>
						<div :class="titleclass == 2 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(2,'军事')">军事</div>
						<div :class="titleclass == 3 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(3,'娱乐')">娱乐</div>
						<div :class="titleclass == 4 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(4,'生活')">生活</div>
						<div :class="titleclass == 5 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(5,'国际')">国际</div>
						<div :class="titleclass == 6 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(6,'体育')">体育</div>
						<div :class="titleclass == 7 ? 'typetabSelect' : 'typetabNoSelect'"
								 @click="titleClass(7,'科技')">科技</div>
			</div>
		</div>
		<div class="clienttop">
			<div class="clienttopleft">
				欢迎使用重明新闻网站，感谢您的使用！
			</div>
			<el-popover
				placement="bottom"
				width="300"
				trigger="hover">
				<el-input placeholder="请输入内容"
									v-model="inputText" 
									@input ="inputchange"
									class="input-with-select">
					<el-button @click="inputchange" slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<div v-for="(item,index) in inputList" @click="golookNews(item)" :key="index" class="queryNews">
					{{item.aname}}
				</div>
				<el-button slot="reference" size="mini" type="danger" icon="el-icon-search" circle></el-button>
			</el-popover>
			<div style="z-index: 10000;" id="he-plugin-simple"></div>
			<div class="clienttopright">
				<div @click="denglu" v-if="$userInfo.token == '' || showSIGN">登录</div>
				<div class="ma-img" v-else-if="!showSIGN">
         <div style="padding-right:10px;">
           {{$userInfo.nickname === ""?"------":$userInfo.nickname}}
         </div>
				<el-dropdown @command="dropdownCommand">
					<span class="el-dropdown-link">
						<img v-if="$user_pic != 'undefined' && $user_pic != 'null' && $user_pic != ''" slot="reference" class="headimg" :src="$user_pic">
						<img v-else slot="reference" class="headimg" src="../../assets/img/head.png">
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="a">个人信息</el-dropdown-item>
						<el-dropdown-item command="b">修改密码</el-dropdown-item>
						<el-dropdown-item command="e">个人评论</el-dropdown-item>
						<el-dropdown-item v-if="$userInfo.power == 1" command="c">新闻管理</el-dropdown-item>
						<el-dropdown-item command="d">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
       </div>
			</div>
		</div>
		<div class="clientcontent" ref="clientHeight">
			<div style="width:1082px;margin: 1% 100px 0 100px;">
				<div class="title">
					<div class="titlelog">
						重&nbsp;明&nbsp;新&nbsp;闻
					</div>
					<div class="titleclass">
						<div :class="titleclass == 1 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
							 	 :style="{color:titleclass == 1 ? '#FF6600' : ''}"
								 @click="titleClass(1,'主页')">主页</div>
						<div :class="titleclass == 2 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
								 :style="{color:titleclass == 2 ? '#FAA90E' : ''}"
								 @click="titleClass(2,'军事')">军事</div>
						<div :class="titleclass == 3 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
								 :style="{color:titleclass == 3 ? '#495DEE' : ''}"
								 @click="titleClass(3,'娱乐')">娱乐</div>
						<div :class="titleclass == 4 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
								 :style="{color:titleclass == 4 ? '#00B8B9' : ''}"
								 @click="titleClass(4,'生活')">生活</div>
						<div :class="titleclass == 5 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
								 :style="{color:titleclass == 5 ? '#319EF3' : ''}"
								 @click="titleClass(5,'国际')">国际</div>
						<div :class="titleclass == 6 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
								 :style="{color:titleclass == 6 ? '#00B8B9' : ''}"
								 @click="titleClass(6,'体育')">体育</div>
						<div :class="titleclass == 7 ? 'titleClassYesSelect' : 'titleClassNoSelect'"
								 :style="{color:titleclass == 7 ? '#319EF3' : ''}"
								 @click="titleClass(7,'科技')">科技</div>
					</div>
				</div>
				<div class="newsHot" v-show="titleclass == 1">
					<div class="newsHotTitle">
							<div class="newsHotTitlehot">
								<i class="el-icon-star-off"></i>
								热搜榜
							</div>
							<div ref="newsHotcontent">
								<div 
								v-for="item,index in hotNews"
								:key="index"
								class="newsHotcontent" 
								@click="golookNews(item)"
								@mouseover="mouseover(index)"
								@mouseleave="mouseleave(index)"
								:style="{height:hotshowimgindex == index ? '140px' : '22px'}" >
								<div :style="{opacity:hotshowimgindex == index?'':'0'}" class="demo-image__error newsHotcontentimg">
										<el-image class="newsHotcontentimg"
															:src="item.cover"
															:fit="'cover'">
															<div slot="error" class="image-slot">
																<i class="el-icon-loading"></i>
															</div>
															</el-image>
								</div>
								<div :class="hotshowimgindex == index ?'newsHotname' : 'newsHotnamemouse'">
									<div :style="{color:hotshowimgindex == index ? 'white' : 
																index == 0 ? '#FE2D46' :
																index == 1 ? '#FF6600' :
																index == 2 ? '#FAA90E' : '#9195A3',
																backgroundColor:hotshowimgindex != index ? '' : 
																index == 0 ? '#FE2D46' :
																index == 1 ? '#FF6600' :
																index == 2 ? '#FAA90E' : '#FAA90E',}"
											:class="hotshowimgindex == index ?'newsHotindex' : 'newsHotindexmouse'">
												{{index + 1}}
									</div>
									<div :style="{color:hotshowimgindex == index ? 'white' : ''}" class="newsHottextname">{{item.aname}}</div>
									<div v-if="item.aredu == 1" class="newsHottext">热</div>
									<div v-else-if="item.aredu == 2" class="newsHottext1">新</div>
								</div>
							</div>
						</div>
					</div>
					<div class="newsHotChar">
						<div class="echarname">实时脉搏</div>
						<div  @mouseover="echarMouseover()"
									@mouseleave="echarMouseleave()" 
									class="newsHotCharcontent" 
									ref="domechars" 
									id="domechars"></div>
						<div class="yiqingname">
							<div>疫情实时大数据报告</div>
							<div class="yiqingTime">更新至{{yiqingList.time}}</div>	
						</div>
						<div class="yiqing">
							<div class="yiqingcontent" @click="goyiqing">
								<div class="yiqingName">累计确诊</div>
								<div class="yiqingNum" style="color:#B10000;">{{yiqingList.qz.total}}</div>
								<div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.qz.add}}</span></div>
							</div>
							<div class="yiqingcontent" @click="goyiqing">
								<div class="yiqingName">累计境外</div>
								<div class="yiqingNum" style="color:#FE6B22;">{{yiqingList.jy.total}}</div>
								<div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.jy.add}}</span></div>
							</div>
							<div class="yiqingcontent" @click="goyiqing">
								<div class="yiqingName">累计治愈</div>
								<div class="yiqingNum" style="color:#13B593;">{{yiqingList.zy.total}}</div>
								<div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.zy.add}}</span></div>
							</div>
							<div class="yiqingcontent" @click="goyiqing">
								<div class="yiqingName">累计死亡</div>
								<div class="yiqingNum" style="color:#666666;">{{yiqingList.sw.total}}</div>
								<div class="yiqingPre">较昨日<span class="yipingPreNUme">+{{yiqingList.sw.add}}</span></div>
							</div>
						</div>
					</div>
				</div>
				<div  v-show="titleclass == 1" class="contentType">
					<type-list @goType="goType" :newList="item"  v-for="(item,index) in detailList" :key="index"></type-list>
				</div>
				<div class="newsHot"  v-show="titleclass != 1">
					<div :class="clientHeight > -40 ? 'otherClass':'otherClasspos'">
						<div class="newsHotTitlehot">热搜榜</div>
						<div>
							<div class="otherClassclass">类型</div>
							<div>
								<div	@click="somlltypeclick('全部类型')"
								 			:class="smolltype == '全部类型'?'otherClassclassName1':'otherClassclassName2'">全部类型</div>
								<div 	@click="somlltypeclick('最多访问')" 
											:class="smolltype == '最多访问'?'otherClassclassName1':'otherClassclassName2'">最多访问</div>
								<div 	@click="somlltypeclick('最新热度')"
								 			:class="smolltype == '最新热度'?'otherClassclassName1':'otherClassclassName2'">最新热度</div>
								<div	@click="somlltypeclick('最新上线')"
											:class="smolltype == '最新上线'?'otherClassclassName1':'otherClassclassName2'">最新上线</div>
							</div>
						</div>
					</div>
					<div :class="clientHeight > -40 ? 'otherContent':'otherContentpos'">
						<div class="otherContentNv">{{typedata.atype}} / {{smolltype}}</div>
						 <ul class="infinite-list" v-infinite-scroll="queryTypr('add')">
							<li v-for="(item,index) in typeList"
									class="infinite-list-item"
									:key="index">
								<div 	@mouseover="limouseover(index)"
											@click="golookNews(item)"
											@mouseleave="limouseleave(index)">
									<el-image :src="item.cover" :fit="'cover'" class="infinite-list-item-img"></el-image>
								</div>
								<div @click="golookNews(item)"  class="infinite-list-item-content">
									<div 	@mouseover="limouseover(index)"
												@mouseleave="limouseleave(index)" 
												class="infinite-list-item-content-name"
												:style="{color:otherNewsIndex === index?'rgb(49,94,251)':''}">{{item.aname}}</div>
									<div  class="infinite-list-item-content-text">{{item.ainformation}}</div>
								</div>
								<div class="infinite-list-item-border"></div>
								<div class="infinite-list-item-number">
									<div class="infinite-list-item-number-num">{{item.fanwen}}</div>
									<div class="infinite-list-item-number-text">热搜指数</div>
								</div>
							</li>
						</ul>
						<p class="typeloading" v-if="typeloading">加载中...</p>
    				<p class="typeloading" v-if="noMore">没有更多了</p>
					</div>
				</div>
			</div>
		</div>
		<edit-user @closedialog="closedialog" :dialogVisible="dialogVisible"></edit-user>
		<edit-pass @closedialogPassword="closedialogPassword" :dialogPass="dialogPass"></edit-pass>
		<ping-lun @closedialogpinglun="closedialogpinglun" :pinglunShow="pinglunShow"></ping-lun>
	</div>
</template>

<script>
import typeList from '../../components/typeList.vue'
import editUser from '../../components/editUserInfo.vue'
import editPass from '../../components/editPassword.vue'
import pingLun from '../../components/pinglun.vue'
import *as echarts from 'echarts'
export default {
  name:'clientHome',
	components: {
    'edit-user': editUser,
		'edit-pass':editPass,
		'type-list':typeList,
		'ping-lun':pingLun
  },
	data(){
		return{
			bgImg:['bgImg0','bgImg1','bgImg4','bgImg2','bgImg4','bgImg3','bgImg2'],
			interChar:Object,
			yiqingList:{
				qz:{
					total:0,
					add:0
				},
				jy:{
					total:0,
					add:0
				},
				sw:{
					total:0,
					add:0
				},
				zy:{
					total:0,
					add:0
				},
				time:''
			},
			pinglunShow:false,
			inputList:[],
			charsData:[],
			inputText:'',
			charsDataCopy:[],
			dialogPass:false,
			dialogVisible:false,
			noMore:false,
			typeloading:false,
			smolltype:1,
			otherNewsIndex:'',
			countNews:20,
			showSIGN:false,
			titleclass:1,
			singImg:[],
			hotshowimgindex:0,
			mouseoversetTimeout:'',
			mouseleavesetTimeout:'',
			clientHeight:100,
			hotNews:[],
			typeList:[],
			typedata:{
				atype:'',
				number:1,
				page:10,
				hot:false,
				aredu:0,
			},
			detailList:[],
		}
	},
	mounted(){
		this.queryEcharsData()
		this.queryhotnews()
		this.queryTypeDetail()
		this.queryYiqing()
		this.$nextTick(() => {
      window.addEventListener('scroll',this.handleScrollx,true)//距离顶部高度
    })
		window.WIDGET = {
			"CONFIG": {
				"modules": "01234",
				"background": "5",
				"tmpColor": "FFFFFF",
				"tmpSize": "16",
				"cityColor": "FFFFFF",
				"citySize": "16",
				"aqiColor": "FFFFFF",
				"aqiSize": "16",
				"weatherIconSize": "24",
				"alertIconSize": "18",
				"padding": "10px 10px 10px 10px",
				"shadow": "0",
				"language": "auto",
				"fixed": "false",
				"vertical": "top",
				"horizontal": "left",
				"key": "f8caac805c904ce99bceb7c5a8dfdb53"
			}
		}
		let script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0';
		document.getElementsByTagName('head')[0].appendChild(script);
	},
	watch:{
  },
	methods:{
		//跳转分类页面
		goType(text){
			switch(text){
				case '军事':
          this.titleClass(2,text)
          break;
				case '娱乐':
          this.titleClass(3,text)
          break;
				case '生活':
          this.titleClass(4,text)
          break;
				case '国际':
          this.titleClass(5,text)
          break;
				case '体育':
          this.titleClass(6,text)
          break;
				case '科技':
          this.titleClass(7,text)
          break;
			}
			
		},
		//获取内容分类详情
		queryTypeDetail(){
			this.$http.get('/api/home_data').then(res => {
        if(res.status == 0){
					let i = ['军事','娱乐','生活','国际','体育','科技']
					i.forEach(item => {
						res.data.forEach((item2,index) => {
							if(item == item2.name){
								item2.content.forEach(item3 => {
									item3.cover = ''
								})
								this.queryTypeDetailimg(index,item2.content[0]._id)
								this.detailList.push(item2)
							}
						})
					})
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
		queryTypeDetailimg(index,id){
			this.$http.post('/api/cover',{aid:id}).then(res => {
        if(res.status == 0){
					this.detailList[index].content[0].cover = res.message[0].cover
        }
      })
		},
			//获取疫情信息
		queryYiqing(){
			this.$http.get('/ug/api/wuhan/app/data/list-total').then(res => {
				this.yiqingList.time = res.data.overseaLastUpdateTime
				this.yiqingList.qz.total = res.data.chinaTotal.total.confirm
				this.yiqingList.qz.add = res.data.chinaTotal.today.confirm
				this.yiqingList.jy.total = res.data.chinaTotal.total.input
				this.yiqingList.jy.add = res.data.chinaTotal.today.input
				this.yiqingList.zy.total = res.data.chinaTotal.total.heal
				this.yiqingList.zy.add = res.data.chinaTotal.today.heal
				this.yiqingList.sw.total = res.data.chinaTotal.total.dead
				this.yiqingList.sw.add = res.data.chinaTotal.today.dead
				// res.data.areaTree.forEach(item => {
				// 	if(item.name == "中国"){
				// 		this.yiqingList.sw.add = 0
				// 		item.children.forEach(item2 => {
				// 			this.yiqingList.sw.add += item2.today.dead
				// 		})
				// 	}
				// })
      })
		},
		//关闭弹窗
		closedialog(){
			this.dialogVisible = false
		},
		closedialogPassword(){
			this.dialogPass = false
		},
		closedialogpinglun(){
			this.pinglunShow = false
		},
		//判断小类型
		somlltypeclick(i){
			this.smolltype = i
			this.typeList = []
			this.noMore = false
			this.typedata.number = 1
			this.typedata.page = 10
			this.queryTypr()
		},
		handleScrollx() {
      this.clientHeight = this.$refs.clientHeight.getBoundingClientRect().top
    },
		//获取热搜新闻
		queryhotnews(){
			this.$http.get('/api/hot_search').then(res => {
        if(res.status == 0){
					res.message.forEach(item => {
						item.cover = ''
					})
					this.hotNews = res.message
					this.queryhotnewsimg(0,this.hotNews[0]._id)
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
		//获取热搜新闻图片
		queryhotnewsimg(index,id){
			let i = this.singImg.indexOf(id)
			if(i != -1) return
			this.singImg.push(id)
			this.$http.post('/api/cover',{aid:id}).then(res => {
        if(res.status == 0){
					this.hotNews[index].cover = res.message[0].cover
        }else{
					this.singImg.forEach(item => {
						if(item == id ) item = null
					})
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
				this.singImg.forEach(item => {
						if(item == id ) item = null
					})
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
		goyiqing(){
			window.open('/client/newpneumonia')
		},
		//头像下拉菜单回调
		dropdownCommand(e){
			if(e == 'c'){
				window.open('/management/newsManage')
			}
			if(e == 'a'){
				this.dialogVisible = true
			}
			if(e == 'b'){
				this.dialogPass = true
			}
			if(e == 'e'){
				this.pinglunShow = true
			}
			if(e == 'd'){ 
				this.$userInfo.username = ''
				this.$userInfo.nickname = ''
				this.$userInfo.email = ''
				this.$userInfo.power = ''
				this.$userInfo.pagePower = ''
				this.$userInfo.token = ''
				this.$userInfo._id = ''
				this.$user_pic = ''
				localStorage.setItem("token",'')
				localStorage.setItem("user_pic",this.$user_pic)
				localStorage.setItem("userInfo",escape(JSON.stringify(this.$userInfo)))
				this.showSIGN = true
			}
		},
		//触发登录
		denglu(){
			this.$router.push("/record");
		},
		//选择标题
		titleClass(index,name){
			this.noMore = false
			this.titleclass = index
			window,scrollTo(0,0)
			this.smolltype = '全部类型'
			this.typedata = {
				atype:name,
				number:1,
				page:10,
				hot:false,
				aredu:0,
			}
			this.typeList = []
			this.queryTypr()
		},
		//类型查询数据
		queryTypr(text){
			if(this.typeloading || this.titleclass == 1 || this.noMore) return
			if (this.smolltype == '全部类型') {
				this.typedata.hot = false
				this.typedata.aredu = 0
			} else if (this.smolltype == '最多访问') {
				this.typedata.hot = true
				this.typedata.aredu = 0
			} else if (this.smolltype == '最新热度') {
				this.typedata.hot = false
				this.typedata.aredu = 1
			} else if (this.smolltype == '最新上线') {
				this.typedata.hot = false
				this.typedata.aredu = 2
			}
			if('add' == text){
				this.typedata.number += 1
			}
			this.typeloading = true
			this.$http.post('/api/new_type',this.typedata).then(res => {
				this.typeloading = false
        if(res.status == 0){
					this.typeList = this.typeList.concat(res.message)
					if(this.typeList.length >= res.total || res.message.length == 0){
						this.noMore = true
					}
        }else{
					this.noMore = true
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
				this.noMore = true
				this.typeloading = false
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
		inputchange(){
			this.$http.post('/api/vague_search',{search:this.inputText}).then(res => {
        if(res.status == 0){
					this.inputList = res.message
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
		//热点新闻鼠标移入
		mouseover(index){
			clearTimeout(this.mouseoversetTimeout)
			clearTimeout(this.mouseleavesetTimeout)
			if(this.hotNews[index].cover == ''){
				this.queryhotnewsimg(index,this.hotNews[index]._id)
			}
			this.mouseoversetTimeout = setTimeout(() => {
				this.hotshowimgindex = index
			}, 300);
		},
		//热点新闻鼠标移出
		mouseleave(){
			clearTimeout(this.mouseoversetTimeout)
			clearTimeout(this.mouseleavesetTimeout)
			this.mouseleavesetTimeout = setTimeout(() => {
				this.hotshowimgindex = 0
			}, 300);
		},
		//其他新闻鼠标移入
		limouseover(index){
			this.otherNewsIndex = index
		},
		//其他新闻鼠标移出
		limouseleave(){
			this.otherNewsIndex = ''
		},
		golookNews(item){
			window.open('/client/lookNews?aid=' + item._id)
		},
		//获取echar数据
		queryEcharsData(){
			this.$http.get('/api/data_analysis').then(res => {
        if(res.status == 0){
					let list = res.result
					this.charsDataCopy = []
					list.forEach(item =>{
						let data = {
							name:item.aname,
							value:item.fanwen,
							aid:item._id
						}
						this.charsDataCopy.push(data)
					})
					this.charsData = this.charsDataCopy.slice(0,11)
					this.chars()
					this.interChar = setInterval(()=>{
						let a = this.charsDataCopy[0]
						this.charsData.shift()
						this.charsData.push(this.charsDataCopy[13])
						this.charsDataCopy.shift()
						this.charsDataCopy.push(a)
						this.chars()
					},2000)
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
		echarMouseover(){
			if(this.charsData.length == 0) return
			clearInterval(this.interChar)
		},
		echarMouseleave(){
			if(this.charsData.length == 0) return
			this.interChar = setInterval(()=>{
				let a = this.charsDataCopy[0]
				this.charsData.shift()
				this.charsData.push(this.charsDataCopy[13])
				this.charsDataCopy.shift()
				this.charsDataCopy.push(a)
				this.chars()
			},2000)
		},
		chars(){
			var chartDom = this.$refs.domechars
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				xAxis: {
					type: 'category',
					boundaryGap: false,
					splitLine:{ //修改背景线条样式
						show:false,//是否展示 
					},
					axisLine: {
						show: false, //隐藏y轴
					},
					axisTick: {
						show: false,  //刻度线
					},
					axisLabel: {
						show: false, //隐藏刻度值
					}
				},
				yAxis: {
					type: 'value',
					boundaryGap: [0, '5%'],
					splitLine: {
						show: true,
						lineStyle:{
							color:'rgb(246,234,240)'
						}
					},
					axisTick: {
						show: false,  //刻度线
					},
					axisLine: {
						show: false, //隐藏y轴
					},
					axisLabel: {
						show: false, //隐藏刻度值
					}
				},
				visualMap: {
					type: 'piecewise',
					show: false,
					dimension: 0,
					showAllSymbol: true,
					seriesIndex: 0,
					pieces: [
						{
							gt: 0,
							lt: 100,
							color: 'rgba(200, 210, 250)'
						},
					]
				},
				grid:{
					top:40,
					left:30,
					right:30,
					bottom:20,
				},
				series: [
					{
						type: 'line',
						smooth: 0.6,
						areaStyle: {},
						label: {
							show: true,
							position: "top",
							textStyle: {
								color: "#222"
							},
							formatter: function (a) {
									return a.name
							}
						},
						data: this.charsData
					}
				]
			};

			option && myChart.setOption(option);
			myChart.on('click', function(params) {
				// 控制台打印数据的名称
				window.open('/client/lookNews?aid=' + params.data.aid)
			});
		}
	}
}
</script>

<style scoped>
.clienthome{
  /* background: -webkit-linear-gradient(to bottom,#7F7FD5,#86A8E7,rgb(255, 255, 255));
  background: linear-gradient(to bottom, #7F7FD5,#86A8E7,rgb(255, 255, 255));  */
	background-attachment: fixed;
	background-size: 100% 100%;
	-webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
	overflow: auto;
	width: 100%;
	position: fixed;
	top: 0;
  right: 0;
  left: 0;
	bottom: 0;
}
.bgImg0{
	background-image: url('../../assets/img/bg0.png');
}
.bgImg1{
	background-image: url('../../assets/img/bg1.png');
}
.bgImg2{
	background-image: url('../../assets/img/bg2.png');
}
.bgImg3{
	background-image: url('../../assets/img/bg3.png');
}
.bgImg4{
	background-image: url('../../assets/img/bg4.png');
}
.clienttop{
	height:45px;
	box-shadow: 0 1px 3px #3b3a3a;
  display: flex;
	align-items: center;
	z-index: 9999;
}
.clienttopleft{
	padding-left: 20px;
	font-size: 16px;
	color: white;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	flex:1;
}
.clienttopright{
	display: flex;
	align-items: center;
	padding-right: 20px;
	justify-content: right;
	font-size: 16px;
	color: white;
	cursor: pointer;
}
.ma-img{
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  color: rgb(241, 243, 248);
  cursor: pointer;
}
.headimg{
  width: 32px;
  height: 32px;
  border-radius: 50%;
	z-index:9999;
	display: flex;
}
.clientcontent{
	width: 100%;
	display: flex;
	justify-content: center;
	min-width: 1282px;
}
.title{
	display: flex;
	height:80px;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}
.titlelog{
	font-size: 45px;
	font-weight: 900;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	color: white;
	width: 100%;
	display: flex;
	justify-content: left;
}
.titleclass{
	display: flex;
	width: 100%;
	justify-content: right;
	font-size: 20px;
	color: white;
	flex: 1;
	font: 20px/30px Arial, sans-serif;
}
.titleClassNoSelect{
	width: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.titleClassYesSelect{
	width: 70px;
	background-color: white;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
}
.newsHot{
	display: flex;
	margin-top: 20px;
	width: 1082px;
}
.newsHotTitle{
	background-color: white;
	border-radius: 15px 15px 0 0;
	padding: 25px 25px 0 25px;
	width: 350px;
}
.newsHotChar{
	background-color: rgb(247,243,247);
	border-radius: 0 15px 15px 0;
	margin-top: 30px;
	width: 682px;
}
.newsHotCharcontent{
	background-color: rgb(247,243,247);
	border-radius: 0 15px 0 0;
	width: 682px;
	height: 313px;
}
.newsHotTitlehot{
	font: 20px Arial, sans-serif;
	color: #FF6600;
	padding-bottom: 10px;
}
.newsHotcontent{
	border-radius: 15px;
	cursor: pointer;
	padding-top: 10px;
	border: 0;
	transition: 0.4s;
	width: 350px;
}
.newsHotcontentimg{
	width: 100%;
	height: 100%;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.newsHotname{
	position: relative;
	display: flex;
	bottom: 25px;
	align-items: center;
}
.newsHotnamemouse{
	position: relative;
	display: flex;
	bottom: 25px;
}
.newsHottextname{
	flex: 1;
	font-size: 15px;
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.newsHottext{
	color: white;
	background-color: rgb(241, 16, 8);
	width: 16px;
	height: 16px;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	margin-right: 10px;
}
.newsHottext1{
	color: white;
	background-color: #FF9812;
	width: 16px;
	height: 16px;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	margin-right: 10px;
}
.newsHotindex{
	width: 25px;
	height: 25px;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:0 8px 0 8px;
	margin-right: 10px;
}
.newsHotindexmouse{
	width: 25px;
	height: 21px;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:0 8px 0 8px;
	margin-right: 10px;
}
.otherClass{
	width: 143px;
	height: 290px;
	padding: 20px;
	background-color: white;
	border-radius: 15px;
}
.otherClasspos{
	width: 143px;
	height: 290px;
	padding: 20px;
	background-color: white;
	border-radius: 15px;
	position: fixed;
	top:80px;
}
.otherClassclassName1{
	background-color: #f9f9f9;
	float: left;
	margin-top: 5px;
	padding: 3px 4px;
	font-size: 13px;
	line-height: 13px;
	border-radius: 5px;
	color: #7F7FD5;
	cursor: pointer;
}
.otherClassclassName2{
	margin-top: 5px;
	color: #626675;
	cursor: pointer;
	float: left;
	padding: 3px 4px;
	font-size: 13px;
	line-height: 13px;
}
.otherClassclass{
	margin-bottom: 12px;
	margin-top: 20px;
	font-size: 13px;
	line-height: 13px;
	color: #333;
}
.otherContent{
	flex: 1;
	margin-left: 20px;
	background-color: white;
	border-radius: 15px;
}
.otherContentpos{
	flex: 1;
	margin-left: 203px;
	background-color: white;
	border-radius: 15px;
	z-index: 1000;
}
.otherContentNv{
	color: #9195A3;
	font: 13px/23px Arial, sans-serif;
	padding: 20px 20px 0 30px;
}
.infinite-list{
	padding: 0 20px 20px 20px;
}
.infinite-list-item{
	display: flex;
	height: 80px;
	margin-bottom: 25px;
}
.infinite-list-item-img{
	cursor: pointer;
	width: 143px;
	height: 88px;
	border-radius: 12px;
}
.infinite-list-item-content{
	flex: 1;
	height: 60px;
	border-right: 1px;
	padding: 10px 30px 10px 20px;
	cursor: pointer;
}
.infinite-list-item-content-name{
	font-size: 18px;
  line-height: 18px;
  color: #222;
	text-overflow:ellipsis;
	overflow: hidden;
	width: 440px;
	white-space: nowrap;
}
.infinite-list-item-content-text{
	padding-top: 13px;
	font-size: 13px;
  color: #626675;
	font: 13px/23px Arial, sans-serif;
	word-wrap: break-word;
	word-break: break-all;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 20px;
}
.infinite-list-item-border{
	width: 1px;
	height: 88px;
	background: linear-gradient(rgb(255, 255, 255),#e7e8eb,rgb(255, 255, 255)); 
}
.infinite-list-item-number{
	width: 143px;
	height: 88px;
	padding-top:20px ;
	font: 13px/23px Arial, sans-serif;
}
.infinite-list-item-number-num{
	text-align: center;
	font-size: 18px;
	line-height: 18px;
	color: #9195a3;
}
.infinite-list-item-number-text{
	text-align: center;
	font-size: 13px;
  line-height: 13px;
  color: #c4c7ce;
}
.typeloading{
	text-align: center;
	font-size: 14px;
	color: #5e6d82;
	line-height: 1.5em;
	padding-bottom: 20px;
}
.echarname{
	height: 48px;
	font-size: 14px;
	padding-left: 20px;
	line-height: 100px;
	color: #222;
}
.contentType{
	padding: 25px 20px 0 20px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.queryNews{
	font-size: 14px;
  line-height: 20px;
  color: #666666;
	margin-top: 10px;
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	cursor: pointer;
}
.otherhead{
	position: fixed;
  top: 0;
  right: 0;
  left: 0;
	background-color: white;
	z-index: 9999;
	transition: 0.4s;
	display: flex;
	justify-content: center;
}
.typetab{
	min-width: 1082px;
	display: flex;
}
.typetabNoSelect{
	margin: 0 20px;
	font-size: 16px;
  line-height: 40px;
  color: #222;
	cursor: pointer;
}
.typetabSelect{
	margin: 0 20px;
	font-size: 16px;
  line-height: 40px;
  color: #FF6600;
	border-bottom: 2px solid #FF6600;
	cursor: pointer;
}
.yiqing{
	height: 80px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 30px;
}
.yiqingcontent{
	width: 130px;
	height: 70px;
	cursor: pointer;
}
.yiqingname{
	padding:0 30px 0 20px ;
	height: 35px;
	display: flex;
	background-color: white;
	justify-content: space-between;
	font-size: 14px;
	align-items: center;
}
.yiqingTime{
	color: #9195a3;
	font-size: 13px;
}
.yiqingName{
	text-align: center;
	color: #393939;
  font-size: 13px;
}
.yiqingNum{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	font-size: 24px;
	font-weight: bold;
}
.yiqingPre{
	text-align: center;
	color: #999;
  font-size: 13px;
}
.yipingPreNUme{
	color: #666666;
	font-weight: bold;
}
</style>